<script setup>
import { ref,defineExpose } from 'vue'
import { Search } from '@element-plus/icons-vue'
const props = defineProps({
	modelVisible: Boolean
})
const emits = defineEmits(['showModel'])
const typeCheck = ref(0)
const styleObj = {
	default: '默认样式'
}
const modelVisible=ref(false)
const data = ref({
	activity_description: '您有一个推广任务已经开始，快点击下方链接领取你的专属海报 ，邀请客户添加你的企业微信吧～ ',
	activity_source_ids: null,
	activity_type: 'internal_add_staff',
	auto_mark_kanban_stage: null,
	auto_mark_tags: [],
	auto_reply: '{"attachments": [], "text": {"content": "#\\u7528\\u6237\\u6635\\u79f0#"}}',
	auto_reply_rule: 'special',
	company_description: '风雅',
	company_logo_url:
		'https://weibanzhushou.oss-cn-shenzhen.aliyuncs.com/1749725042939516929/promotion_qr_activity_fission/wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA/lauxeweq1b2b_lauxew4gy9z1669285376800',
	company_name: '风雅',
	corp_id: '1749725042939516929',
	create_body:
		'{"post_url": null, "qr_size": 82, "qr_x": 130, "qr_y": 245, "name": "\\u6d4b\\u8bd512344", "group_list": null, "group_welcome": null, "activity_type": "internal_add_staff", "is_open_company_description": true, "company_description": "\\u98ce\\u96c5", "company_name": "\\u98ce\\u96c5", "scan_qr_guide": "\\u6d4b\\u8bd5\\u63a8\\u5e7f\\u7801", "poster_title": "\\u6d4b\\u8bd5\\u63a8\\u5e7f\\u7801", "company_logo_url": "https://weibanzhushou.oss-cn-shenzhen.aliyuncs.com/1749725042939516929/promotion_qr_activity_fission/wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA/lauxeweq1b2b_lauxew4gy9z1669285376800", "poster_style": "default", "msg_data": "\\u60a8\\u6709\\u4e00\\u4e2a\\u63a8\\u5e7f\\u4efb\\u52a1\\u5df2\\u7ecf\\u5f00\\u59cb\\uff0c\\u5feb\\u70b9\\u51fb\\u4e0b\\u65b9\\u94fe\\u63a5\\u9886\\u53d6\\u4f60\\u7684\\u4e13\\u5c5e\\u6d77\\u62a5 \\uff0c\\u9080\\u8bf7\\u5ba2\\u6237\\u6dfb\\u52a0\\u4f60\\u7684\\u4f01\\u4e1a\\u5fae\\u4fe1\\u5427\\uff5e ", "activity_description": "\\u60a8\\u6709\\u4e00\\u4e2a\\u63a8\\u5e7f\\u4efb\\u52a1\\u5df2\\u7ecf\\u5f00\\u59cb\\uff0c\\u5feb\\u70b9\\u51fb\\u4e0b\\u65b9\\u94fe\\u63a5\\u9886\\u53d6\\u4f60\\u7684\\u4e13\\u5c5e\\u6d77\\u62a5 \\uff0c\\u9080\\u8bf7\\u5ba2\\u6237\\u6dfb\\u52a0\\u4f60\\u7684\\u4f01\\u4e1a\\u5fae\\u4fe1\\u5427\\uff5e ", "enable_daily_notification": true, "daily_notification_time": "12:00", "staff_ext_id_list": ["wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA"], "activity_sources": null, "enable_group_name": true, "group_name": null, "end_date": null, "end_time": null, "is_unlimited": true, "tag_enable": false, "customer_remark_enable": false, "customer_desc_enable": false, "auto_mark_id": [], "customer_desc": null, "customer_remark": null, "auto_reply_rule": "special", "auto_reply": "{\\"attachments\\":[],\\"text\\":{\\"content\\":\\"#\\u7528\\u6237\\u6635\\u79f0#\\"}}", "kanban_stage_id": null, "radar_id": null}',
	created_at: 1669285410,
	ctime: '2022-11-24 18:23',
	creator_id: 19777611,
	customer_desc: null,
	customer_desc_enable: false,
	customer_remark: null,
	customer_remark_enable: false,
	daily_notification_time: '12:00',
	deleted: false,
	enable_daily_notification: true,
	enable_group_name: true,
	end_time: null,
	group_name: null,
	group_welcome: null,
	hid: 'rlukv6nq7',
	id: 3333,
	is_open_company_description: true,
	is_unlimited: true,
	kanban_stage_name: '',
	msg_data: '您有一个推广任务已经开始，快点击下方链接领取你的专属海报 ，邀请客户添加你的企业微信吧～ ',
	name: '测试12344',
	post_url: null,
	poster_style: 'default',
	poster_title: '测试推广码',
	qr_size: 82,
	qr_x: 130,
	qr_y: 245,
	radar_id: null,
	render_group_list: [],
	scan_qr_guide: '测试推广码',
	staff_ext_id_list: ['wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA'],
	staff_list: [
		{
			address: null,
			alias: '',
			avatar: 'https://wework.qpic.cn/wwpic/186339_3kO_N4tbShSL3lF_1665369145/0',
			corp_id: '1749725042939516929',
			created_at: 1668667834,
			email: null,
			enable: true,
			english_name: null,
			ext_id: 'wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA',
			extattr: '{"attrs": []}',
			external_contact_able: true,
			external_position: null,
			external_profile: null,
			external_user_count: 9,
			gender: null,
			have_permission: true,
			ia_authorized: true,
			ia_authorized_at: 1668668824,
			ia_ext_id: 'wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA',
			id: 19777611,
			is_root: true,
			ma_authorized: false,
			ma_authorized_at: null,
			mobile: null,
			moment_address: null,
			moment_cover: null,
			name: '夏小飞',
			new_ext_id: null,
			oa_authorized: true,
			oa_authorized_at: 1668667843,
			oa_ext_id: 'wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA',
			openid: null,
			position: '',
			qr_code: null,
			signature: null,
			status: 1,
			telephone: '',
			unionid: null,
			user_id: 55975910,
			usertype: 5
		}
	],
	status: 'ongoing',
	tag_enable: false,
	updated_at: 1669285410
})

const remind = () => {
	ElMessage({ message: '提醒成功', type: 'success', duration: 1500 })
}
const show=(val)=>{
	console.log(val)
	data.value=val
	modelVisible.value=true
}
defineExpose({
  show
})
</script>
<template>
	<div class="model-box">
		<el-dialog
			v-model="modelVisible"
			title="详情"
			@close="emits('showModel', false)"
			width="700px"
			:center="true"
		>
			<div class="link-body">
				<div class="share-dialog-content">
					<div class="dialog-check">
						<el-radio-group v-model="typeCheck" size="large" @change="changStatus">
							<el-radio-button :label="0"> 基础设置</el-radio-button>
							<el-radio-button :label="1">客户设置</el-radio-button>
							<el-radio-button :label="2">海报设置</el-radio-button>
						</el-radio-group>
					</div>
				</div>
				<div class="dialog-table">
					<div class="basic" v-show="typeCheck === 0">
						<div class="basic-item flex-row">
							<div class="desc">推广码名称：</div>
							<div class="text">{{ data.name }}</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">创建时间：</div>
							<div class="text">{{ data.ctime }}</div>
						</div>
						<div class="basic-item flex-row" style="align-items: flex-start">
							<div class="desc">推广成员：</div>
							<div class="text">
								共{{ data.staffs.length }}个成员
								<div class="staff-list">
									<div class="staff-list-item" v-for="item in data.staffs" :key="item.id">
										<img :src="item.avatar" alt="" class="avatar-img" />
										<span>{{ item.name }}</span>
									</div>
								</div>
							</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">每日提醒：</div>
							<div class="text">每天 {{ data.ttime }} 汇报推广数据，提醒员工</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">任务说明：</div>
							<div class="text">{{ data.task_state }}</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">推广文案：</div>
							<div class="text">{{ data.promotion_welcome }}</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">失效时间：</div>
							<div class="text" v-if="data.promotion_type == 1">永久有效</div>
							<div class="text" v-if="data.promotion_type == 2">{{ data.end_time }}</div>
						</div>
					</div>
					<div class="basic" v-show="typeCheck === 1">
						<div class="basic-item flex-row">
							<div class="desc">好友欢迎语：</div>
							<!-- <div class="text">#{{}}#</div> -->
						</div>
						<div class="basic-item flex-row">
							<div class="desc">客户标签：</div>
							<div class="text flex-center">
								<el-switch disabled v-model="data.is_tag" :active-value="1" :inactive-value="2" />
								<span>{{ data.is_tag == 1 ? '已开启' : '已关闭' }}</span>
							</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">客户备注：</div>
							<div class="text flex-center">
								<el-switch disabled v-model="data.is_bz" :active-value="1" :inactive-value="2" />
								<span>{{ data.is_bz == 1 ? '已开启' : '已关闭' }}</span>
							</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">客户描述 ：</div>
							<div class="text flex-center">
								<el-switch disabled v-model="data.is_describe" :active-value="1" :inactive-value="2" />
								<span>{{ data.is_describe ? '已开启' : '已关闭' }}</span>
							</div>
						</div>
					</div>
					<div class="basic" v-show="typeCheck === 2">
						<div class="basic-item flex-row">
							<div class="desc">页面标题：</div>
							<div class="text">{{ data.h5_title }}</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">页面样式：</div>
							<div class="text">{{ data.h5_type == 1?'默认样式':'自定义样式' }}</div>
						</div>
						<div class="basic-item flex-row" style="align-items: flex-start">
							<div class="desc">企业logo：</div>
							<div class="text">
								<img class="logo-img" :src="data.h5_one_logo" alt="" />
							</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">企业名称 ：</div>
							<div class="text">
								{{ data.h5_one_qyname }}
							</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">企业介绍 ：</div>
							<div class="text">
								{{ data.h5_one_introduce }}
							</div>
						</div>
						<div class="basic-item flex-row">
							<div class="desc">扫码引导语 ：</div>
							<div class="text">
								{{ data.h5_one_guidance }}
							</div>
						</div>
						<div class="poster-preview">
							<span class="preview-title">{{ data.h5_title }}</span>
							<div class="link-inner">
								<div class="link-card">
									<div class="top-info" style="width: 100%">
										<img
											src="https://weibanzhushou.oss-cn-shenzhen.aliyuncs.com/1749725042939516929/promotion_qr_activity_fission/wogizUDQAALP7FQHyxCG3fEKCMGJ5bGA/lauxeweq1b2b_lauxew4gy9z1669285376800"
											class="crop-icon"
										/>
										<div class="right-info">
											<div class="group-name">{{ data.h5_one_qyname }}</div>
											<div class="small-des des">{{ data.h5_one_qyname }}</div>
										</div>
									</div>
									<div class="entry-group-qr">
										<img
											:src="data.h5_tow_style"
											class="qr-icon"
										/>
									</div>
									<div class="small-des scan-text flex-center" style="width: 120%">
										<img
											src="https://assets.weibanzhushou.com/web/we-work-webapp/finger.9b16331ca887.png"
											class="finger"
										/>
										测试推广码
									</div>
								</div>
							</div>
							<img
								class="bg"
								src="https://assets.weibanzhushou.com/web/we-work-webapp/phonePreview.ef61390b8fe4.jpg"
								alt=""
							/>
							<p class="tips">* 此二维码只是预览效果，请勿直接使用</p>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
.logo-img {
	width: 130px;
	height: 130px;
}
.flex-center {
	display: flex;
	align-items: center;
}
.avatar-img {
	width: 28px;
	height: 28px;
	margin-right: 8px;
}
.flex-row {
	display: flex;
	justify-content: flex-start;
	padding: 0;
}
.link-body {
	position: relative;
	margin-top: -10px;
	min-height: 80vh;
	.poster-preview {
		position: absolute;
		flex-direction: column;
		display: flex;
		align-items: center;
		top: 0;
		right: 0;
		.link-inner {
			position: absolute;
			left: 26px;
			top: 97px;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			-webkit-box-flex: 1;
			flex: 1;
			width: 81%;
			height: 60%;
			padding-left: 9px;
			overflow: auto;
			background: -webkit-linear-gradient(135deg, #a1d2ff, #e5f3ff);
			background: linear-gradient(315deg, #a1d2ff, #e5f3ff);
			.link-card {
				display: flex;
				-webkit-box-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				align-items: center;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				flex-direction: column;
				width: 95%;
				height: 85%;
				background: #fff;
				border-radius: 4px;
				.finger {
					width: 13px;
					margin-right: 8px;
				}
				.small-des {
					font-size: 13px;
					color: rgba(0, 0, 0, 0.45);
					-webkit-transform: scale(0.7);
					transform: scale(0.7);
				}
				.small-des.scan-text {
					text-align: center;
				}
				.top-info {
					display: flex;
					padding-left: 24px;
					-webkit-box-align: start;
					align-items: flex-start;
					.small-des.des {
						-webkit-transform: scale(0.7) translateX(-20%);
						transform: scale(0.7) translateX(-20%);
					}
					.group-name {
						font-size: 11px;
						font-weight: 700;
						color: #000;
					}
					.right-info {
						display: flex;
						-webkit-box-orient: vertical;
						-webkit-box-direction: normal;
						flex-direction: column;
						-webkit-box-align: start;
						align-items: flex-start;
					}
					.crop-icon {
						width: 34px;
						height: 34px;
						margin-right: 8px;
						background: #fff;
						border-radius: 2px;
					}
				}
				.entry-group-qr {
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					.qr-icon {
						width: 131px;
						height: 131px;
						margin: 18px auto 15px;
					}
					.small-des {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.45);
						-webkit-transform: scale(0.7);
						transform: scale(0.7);
					}
				}
			}
		}
		.preview-title {
			position: absolute;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			top: 71px;
			font-size: 11px;
			font-weight: 600;
			color: #000;
		}
		.bg {
			width: 274px;
		}
		.tips {
			margin-top: 18px;
			text-align: center;
			font-size: 13px;
			color: rgba(0, 0, 0, 0.45);
		}
	}

	.share-dialog-content {
		display: flex;
		justify-content: space-between;
		margin-top: 24px;
		.dialog-input {
			display: flex;
			align-items: center;
		}
	}
	.dialog-table {
		margin-top: 16px;
		.desc {
			width: 84px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.65);
			text-align: right;
			white-space: nowrap;
			flex-shrink: 0;
		}
		.text {
			color: rgba(0, 0, 0, 0.85);
			word-break: break-all;
			span {
				margin-left: 8px;
			}
		}
		.basic {
			box-sizing: border-box;
			.basic-item {
				margin-top: 24px;
				align-items: center;
				.staff-list {
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					padding-top: 8px;
					.staff-list-item {
						display: flex;
						-webkit-box-align: center;
						align-items: center;
						background: #f8f8f8;
						border-radius: 2px;
						padding: 10px 16px 10px 10px;
						font-size: 14px;
						font-weight: 400;
						color: #666;
						min-width: 103px;
						max-width: 190px;
						position: relative;
						border: 1px solid transparent;
					}
				}
			}
		}
	}
}
</style>
